

















lib 4jjj dbJjj ^JuJt frjaTuu <ji> LgTuubj Uj 4 jlUI dJu ^Lub IjU Ujju ji Vjl uUU u» dJU4> \ftjjj 4iJ ^l (ubu J3 IJUJ <ji> 


»L^UIjJ \bu dLU J^mj 4 J Uj L^tJ&Ub 4 j ^LUJt gjbbUU 

HTML2U] 


jb^Ll lUu^j Jjju ^jj Uuu^j bUU Jj \w>j 4ii£a lULUj V 3JLubs)t Hyper Text Markup Language J jLUi>l ^ 

AjUjJI uUUaJU ^LbJLU <jUbj Jjju ^LUJI gJUUJ Vj ^Jjil 
(jJ$il J^ijft) gJjjJJ \uUVl cLuJt Sj>j HTMLjuau 



CSS2U 

biJt £$i jl \ U l iJI jJ uj > 4j5juJl J£au^J uLLuJlJI 4jLuU \ yiitj jjl^il (uluuj 4iJ jAj Cascading Style Sheet JjLu I »l ^ 

* Jlull Juuw jJU 



.ub^u&it dJu juUuj (Uluuj ju 4J^$Ull 4jlUI CSS LUu jJ$il Jjbsj ju 4Jjj^JI HTML 4iJ jb JJj jl Ijl 


SjJbil JJLlu JLU£a 4>U 



>LgJ uUuUJl 4 jUI j ^uLUJI ulJju S jUuJI (ul uu u (s\j CSS UUu j^bsil juj ^ 'bUuJI 4b=au£j (s\j HTML jt uusa 


»UjUj JjlJ> c jJjLU cuIjJj cjj^ j^ 4 juujJI j^LU £ji JjJuu ju 4J^Ut ^ bjl Ju> HTM L JllU^ \mUVI \uJI ^ (TagS) ^u^JI jloj 
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Mohammed Alhakem 


Esraa elshiekh 






































HTML ju j^jbJLU 


:j}Ql J ^LUU . 

^mijJI J>IJlu V jryw (WjJ L^IJl^LmiI JljAI ju>LUJt /I ju^QJt bj^slu ^uj jl Jidc tj^J 4*U juQJ jJum 4jJJ j^au ^^Jt ju £jJJt tJJi 

♦ jQuJt L4Ja*j ^ 



<strong/><strong> ^ JlSll Jjuu 

j^QVtj ^iuJI (jAm$ jru jQJt tjjfc 4 jQs uUQ uoj (W^JI tj^J juw jQ UtJ^JQt Jujj UJlU .juJjaII Uisitu 4QQsaj jum jQ> JusaQb ^uj (U*$ IjJb 

^JQUa 

One million <strong>Arab</strong> Coder 

^jJQLsa J^saJt 4 jUu 

One million Arab Coder 

: ^jJQLaa jj^fl (9^(j 4jLLsa Jiuu yJjtu jujuuJ j^aJ 

One million <strong> Arab Coder 

:^QQa 4jQuJt 

One million Arab Coder 

ftlJ&Ub (SuwjJI I jjfe jutu Jj4> QjjjbU ^uu (sJHTMLJI Jlluu j^f JJjj jJjjjJI UiJb L^uL^aj j-bJ' (buj Jju ju^QJt j;U> <jlc Ju^aLJI (Lj t-u£a 

.j}Q)fl (bMj 

:j^Ut (buj Jt ^Lbu ^f . 


Void tags 1 j^J j^Qtj ^ ju ci>uw ^uj jt Jt ^Luu ¥ ^jJI djj* 



DV £*• £«M h«««t I00K F.nd Srt* W^ow LL«^> - O ✓ 63 X 

° «:r _ 

~ <img src=””alt=””> « — 

i ^ Iz~ 

is' Vold Tag - gjli , 0^.3 K> 


jLAb dj^aJ 1 Ja jjjaJt (Lu (U Jl> J& 4Qj^ |LL/ jjJI JuJuJt jQJt 'jjLusa^ UjLsau) JuJuu ^ ij^u 4jLb^f 4*)t ^Luu U Jjsa <i mg> (bu/j Jlull J-uu/ 


.dJUJUbU JuJ jjJI 


<img src= M img. jpg” alt= M my image M > 

:^JbJL=a (bu^il 4jU£au ^uu ji ^Lbu ^f 

<img src= M M alt= M M >t5 jJbt_o l_L»</img> 

/ij^u ^tjjb ^sj Uut :jjw j^uw tilJ^U/b ^jj V 4jt uu> 


♦ jjfi$J ^l t^fluuuj (9J LfrJ? 
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Mohammed Alhakem 


Esraa elshiekh a 


















































>uj >! yaj^ Ji J^sjLmJ jb Jj2j )l 4j! Jju Uj 4UL£a »! J>b diM^a Ju£ J*Lu=a LgJuiu JjLssuIj jm^LUJI i-U 

jk+J i 


BLOCK 


>Q! J>aJt 4 jLL ==3 jjjw ^Lj ^jjJ 

<p>Hello world!</p> <p>Welcome to One Million Arab Coder</p> 

: 4 jsLuit 

C https //cliAMoom .udadlyxoni s 

Hello world! 

Wdcome to One X«Iillion Arab Coder 

>b ji J^aLyJ JJ j Jjjj Lut JJtfL (U Lut y JmoLL J 3 jmau >a 4 jU^a (U Ia>^J Uj=a 

: lnline 

.jLjuJI ULajUjt^ju ya+zj* Jxssi £> Jjl£a^b^ >l^a >jjU! >!j I^ujuUjUu j^LwUt dJ£ Block > j*?U*Jt j*j==ju 



>Ult J>aJ( 4jU^aj jajtatti jjJm 

<span>Hello World! </span> 

<span>Welcome to One Million Arab Coder</span> 


Hello World! Welcome to One 2vtillioii Arab Coder 


J>ij jh*# Js dji! dJJfe ju^UaJ! >j^ (qj <i j>a V 

^UiUt^ 

*L*j£L*ij Ju* jj jJuj£s uUj JuJtfsj ftjaJUUu L^jLitju5> yj i>aUUt ^jj jt Jj inline L^jIj block 4 ^ jm^LwUI^ t Jujju jt UUlc^ • 

/LL^ 4l?j^ 4jjjb Ujjuj ^j^UJt j^awU! 

Jt>aVt 4jU£aJ UUj Julaj jt£ ut^fclt 4 Jjju» (LakJU/t JU (*£ajt dUut U .4 j (^jj jU uilV! jt jUJut^ £>$il t j^J jJ>a jLUt <j& J>jj • 

♦Siifit ^LL^t 4 ^ UjJ Uj=a 4 js.U(JI ijJbLU > ^JJt JjJjuj jj^uiJt jjJm 

l ^U U j tU jtj 4 jL>Vt > uwuJtj 4 jjjUJL (Us <hr> (Quj j <br> (U»j ^jj > JLUu j>aj jU Ujj • 

(^Uj jjUljdiv, p and span^gUg 

* \'* 4 J* l C A C^ ■“ ^Jtj >t jojj ja (U^aULw jjj jJt tjj&> inline Jtj block Jtj^Uu > UU£aj jjLJt jjjJdt<j& 

♦tij^ ^ 

DiV(**/j 

:^JUJt ij>yaJU L£a ij^Uc (Uu jjjLLj J$>j J>u f*J Jt JlaLmJ UJlU 4^jUJt djil 



CSS ulUuUUJt 4 jJ ^tJ&U/b jwm (uUi juhl g^h7«n J*> ILw f>^ jj^it (<y.uJUJ <div> ^uj ^JjULu 

div j^jJUt >tJu >auj j*?LwUt • 

<div> 

* Mohammed Alhakem Esraa elshiekh a 













































r V 

<!--other elements--> 

</div> 

: 

<div> 

<hl>hello world!</hl> 

</div> 

hello world! 

PM 

Sjit UJj jayallb ja\> 4l£sJ$ tfjJvua J mj pJi £2j* J Js U 0j2$ UjLU '<UjUJ! djjt Jp (Mtil^ 

1 Lorern ipsurr* dolor sit amet. consectetur adipisicing elit, sed do 1 

J eiusmod tempor incididunt ut labore et dolore magrva aliqua. Ut enim 1 

1 ad minirn veniam. quis nostrud exercitation ullamco laboris nisi ut 

1 aliquip ex ea commodo consequat. Ouis aute irure dolor in l 

| reprebenderit ir» voluptate velit esse cillum dolore eu fugiat 


CSS uULu*u)t 4 aJ ^tj&Ub jvla |uUi iojj (pa ragraph) uIjaaJI 4jUsJ <p> &***$ ^Jl^Tuu uj> 

<strong/><strong> Jjj jj^jJJt uiiubU j*aU jL=a tjt VI fwjt tJJfe J>tJj j^UU ^t fw <M(^-uj V • 

<P> 

<!--only text and text formating tags--> 

< ! (jJ JuOU 1 1 ^JjUuJUL-J pjuuij J (jOJaO-J JgL-2-9 L_L» > 

</p> 

: jQj 

<p> 

<strong>hello <em>world!</emX/strong> 

</p> 

:4jsiLUt 

hello world! 
j*Ua*Jt j^aJj p J>tJU div tM(^-uj V 

<p> 

<div>j_L5t^ j_lc a>SLJI 1 j_»</div> 

</p> 


span^uj 

Jjuit j^ jjw *jjs) j\aw J.UUU JjjU 2utJ&Ut (LuJ jjl> (Mtr^ (WjJt t Ufe 

<span>-</span> 

T 

1 Lorem ipsum dolor sit amet. jconsectetur adipisicingielit, sed do | 

j eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 1 

1 ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut 
> aliquip ex ea commodo consequat. Duis aute irure dolor in 1 

, reprehenderit in voluptate velit esse cillum dolore eu fugiat 

4- 

<P>-</p> 

:Jtl» 

j-*>V! (Ji djjjJ 1 Jjj jJu JjUut L$J LLU&j <p> ffcuj fttJ&Ub djjj Jjuu LUi 

<p style= M color : red; "> 

Hello World! 

</p> 

:4jUuJ! 

• • • Udacity w x 

C hctps //classioom. udacity.com 3 

HeUo World! 

jjjVt jJJ UJoj) Wo rl d JjJhs Jjj jrJu jt Jlajj Lut jaJuuJ 
♦4j ^uUj jjjju f^j bt VI ^U^t^jJ^ jjjj Vdj^-j jV <span>f^jftJ&UbU3Jb&)tdJufe^ 

jjj^U j>Ut jUu j^yqj 4jLut f*jj span ^ti£Ub) World 4^Ua Ufl^u (&j ^JLJt j^aJt j 

k 0 Mohammed Alhakem Esraa elshiekh a 
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<p style="color :red;"> 

Hello <span style="color :blue; ">World!</span> 

</p> 





«-*=»-=* Tr 

htlpv 


M^llo World ’ 


:^Qt j^aJj ^LiJt ^ 

*d iv Jl J>lJu ^jL spa n Jt j p Jl jjuj Uj<: • 

.span^! P|fa*^ J>lJjdiV(U«$ ju^jfJu^ • 

.div J>tJj dj**Ly* span (Quj LbL«auLj • 


^ <div> </div> 

• </p> 

^ <spanx/span> 


: ¥*3 M* Jtj" juSLu j! LU ^Lu j ^(j HTM L J! ya Us ^ifc LLjoj ^laafaUt djj&^i> 

$4*L uiAUfchU)! 4JL^b 4 j usjQ!$ 4j&iu)! Ji JJjsj js>aIc Jjdu$)tgjh7iot ^usa 
djjLU jL£j >M7jj)inf j^ b.u>j JIjj j>LU J!j*J! !Jla <jifc ut^aUt JjJ 


Lorom ipsum dolor sit amct.; 11 "’f P'^L c i , l®j 
elit, sed do eiusmod tempor incididunt ut labore et 
dolore magna aliqua. Ut enim ad minim veniatn. quis 
nostrud exercitation ullamco laboris nisi cit aliquip ex ea 
commodo consequat. Duis autc irure <Jolor i r» 



</10 a 6>;t2££22$2$S£ 


ID: 

Youremail@gmail.com 

Class: 


: judjjlaj JlJ! Jjdj^J! Jj£ajj SjjLW j gJauJ Jj\ jjJuU 

^^J!LLmj! : ^jV( JLfljjkJ! 

♦c$j>bj! 4 jjjIu (M7jj(hf <jic juQtj SjiuL* uj! LLJ! Jj^jJ! frjLLLu ^ujfajjt LLLu 1 ^7jhf ! L !j! • 

uj! L I u£j 4j ^jILj Juu! J*jju j! ^LjjJuj j! i>V jua-u V ^uiLJ' LLLu! j! • 

l^J LLu (U JU! ju : 4 uLJ! 4 jjjJjJ! 

jMU^ jJluui i-Lu^ujU 4^>4^L! jJu JjJuuJ!j juDL ujU L Lj! !jL ujJ! uL>!j jJjLj jLu 4 u^jU LLw (U jjJLL! jJu Js uj! • 

♦bfau> (fa^ajL jJjJ L^L JjJjuJ!j Lb jjL- jS uJj sLJu^t 4ub jj L^ajluJ uj! 4u$jjU! jJu j! &>^J • 

id Jb juu LjLuj>Lj ujL£s JjV( 4jjjLJ! 

♦jju jjJ 4 j u£^Q$ 4JJ^Lu j! gJauu <ji> jju ju dj-uj jdLuJt ^L (Lu 4 jIj Ju> 

:<j)LJ! id J( juUjju jl uj 
»4>tj id >ok J^ai • 
jjJ 4 j jul> JjjJ Id Jjuu Ju>j>uk jLi>J>!$J! 4jbua)tJjiaj • 

:JLll 

<div id="header"> 

<!--Header content here--> 

</div> 

Jd J! juu 4jhf!j j>( jdLu$U uLj j! JJ& a.u 4 j( ^juu (id) di>j 4 j 4^L> 4uujju 4j^A div J!!JL jUjuUujJ L>^f • 

^JDUs dLJfaL JJJ! id J! pb 4jtUfr u ! jjjia ju CSS J! ^tJjfaub j(ju jjJ juJJ! (Jt^J uIauoj 4JLjLj ^jS! j! jVI jJLu! • 


Esraa elshiekh ^ 


Mohammed Alhakem 





























<style> 

#header { 

width: 100%; 
height :200px; 
background: #4c7bed; 

} 

</style> 

id Jt (wt JjJ # CSS Jt ^ id Jt 

:4jsJuit 



}UL=a J^aJt 


<! doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>One Million Arab Coder</title> 
<style> 

#header { 

width: 100%; 
height: 2 0 Opx; 
background: #4c7bed; 

} 

</style> 

</head> 

<body> 

<div id="header"> 

<!--Header content here--> 

</div> 

</body> 

</html> 


class Jb U jLa 4>U JuLsa ^uQlt 4jjjUt 

♦ jjJ (^j u^%j$ jt frjaTuJ Jj> p&yj ja j^LuJt Ja jt jjoJuJi ^U pjj 4jtj uu> 

:^LJt class Jt jA JjJU jt uou 
»JJAA£ j^jj^aV class Jt^J&u«j jt j^auJ • 

l*.tjtt rl^>cc j*y^t jt j^ a j • 

<p class="paragraph"> 

Hello world! 

</p> 

<p class="paragraph"> 

One Million Arab Coder 

</p> _ 

jJsj Juju jUt j^Ludt 3fluh*j (JLmj Si>tj dj^ J^uJJt uuJ?t jt jJaJLJ jVt uu> class Jt jJsj U^tta^tj jJjjUU Juju uuJ ia>^ • 

class Jt (4*J 

: Ji^ 

<style> 

.paragraph{ 
color :#fff; 
background: #ed7 474; 
padding: 2 Opx; 
font-weight: bold; 

} 

</style> 


V Mohammed Alhakem Esraa elshiekh a 

























class Jl (uwl Jj-s . ju$j CSS Jl ^ class Jl Jjjju Juu 



<! doctype html> 

<html> 

<head> 

<meta charset="utf-8 M > 

<title>One Million Arab Coder</title> 

<style> 

.paragraph{ 
color: #fff; 
background: #ed7 474; 
padding: 2 Opx; 
font-weight: bold; 

} 

</style> 

</head> 

<body> 

<p class="paragraph"> 

Hello world! 

</p> 

<p class="paragraph"> 

One Million Arab Coder 

</p> 

</body> 

</html> 

$ 'class' Jt jl 'id' JI^J&LJ Ji*==> 


id LuLaa^U JJuUil liu jbJjl Jiull Jjum j>UJ 4j u uajt J3 jj^aoJ ^f JJt j^LUJt 4 ^!jJUumU ^uj id Jl 




</10 A B> 


e^n_y_c f>j j r> j I rs 
t~M!LUOH COOEPS 


CX = & 


.^■uUuJt jMJL)jj£ajj ^JuJt J& ^jjJt tiu JiuXI JbUM/ 4>LJ 4j&L=it JSjj^aoJ JJt j^Ludt jj jutJ&uwb ^jj class Jl Ul 


• • • (WMIi)* A/rf.ff.U. X H*w1»b 

0 te-r^wicdiwwcM udlrtjran. 

X 



1 

■ 4C$SfHtlU 

ts« 

X « ' 1 

1 

i htir< 4 «s ^ t • 

i 

■ AC$S#Htlfll ;>»•>» 

v‘fr 

J 1 

- 13 An 1 

a u om j 

i 

i Marpn - padfling - Ixxdcf - box-sttong 

i 

■ ACSS fHTML l«a«A- — - 

6 itt 

«• ft? «m J 

i 

i <-j*. ^JC. W - - '•*— jJ 

1 

■ 4CSS f HTlfll :>»•>>. i*_ 

»33 e 

J ' ' ' ’ ’ ' ' ’ ’ " ’ ’ ' '1 

.. « - : 
- ■ 

1 

1 CSS uu _-j- i 


© 

..... 

1 

V •’• html • cssJ- jy 

i 

■ HllflL JU 

* -0 «. 

40 207 Ih J 

1 

i 

• htm* . css . — logln torm *—• 

■ ACSS « HTlfll :>£»•>» — — » •*_. 

¥ 0® J 

i 

34 SS th | 

1 


seea* 

■- -- - | 

1 

1 .v A 

■ ACSS .HTML - i*_. 

*•« 




.JJ! J>tj ju^lj id JU VJU class jLuJl ;LUul JU^auJ 2 4ji Joj 2 tiu j^aJ 
v 'JJji jJlu id j Class jb^JJUiiu£l (Ji^auj Jj^ 
$ JJjl jJuj class j id JIUj uul Ju jjjUI jJl^j uLU$Uau LJU j>jl 

tiu ju ULJsj juJ tjt 

LujUI UbJj 4JJU ^uLj U>^f LfrLauL* Lul uu> uUumuJI Ji»l ju jJuj 4-ubUjJI djJauJt ^jj jl ^ ja j>! ^LUU! Js 
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Mohammed Alhakem 


Esraa elshiekh a 
































ujjt ^ wLw^ft Jsa^Jt 

HTM L Luuu 4-uLv^M 4 LLJ t Ujjl V u jjjJJi t JJb Jp 

<! doctype html> 

<html> 

<head> 

<meta charset="utf-8 M > 

<title>Untitled Document</title> 

</head> 

<body> 

</body> 

</html> 

:^)li)t J^aJt pJ&LuJ JJJi JjJxjIj HTM L5 ^Jiuu— 4 JLJt sjj Jp 4 Lu Jaj L u* JJJ\ HTM L Jt Jllu** £jj JjJzjJ J^sJt Jjijjjz pj • 

<! doctype html> 

jLjfJ jlsa Jij JJLAi {jj UJjAJ JjJ Jj£a Jt J ^jj V 

(4uAuJtubLJt) metadata Jja\> J^auj^J&Lu head Jt%2kL» • 

4jfj«a)t jijjj^a • 

,4j&Au)t jjjjj • 

*Jtutt Juxm JJ$J L fe . U utfu)t Ju^ JLotLa uLjLu J9jjJ jJuu> j^aJ jUt uljLuit Ju Lju$ 4u>Ui)t uLJjsaJt • 

uUUj 4jUu)t )aJjJ ^jj fyaj jjjb j^ jt juUj JjsaLu Ut 4jimt djjfe J& ujj^auUbJt Jtj£at ji uLLuuu)t ujjjjuj ^iu LUj^a • 

.4-t>jl> 


.UjUj Jjt 4 >j jajiojjjj^a ju juLD' Jua L^J fr liu jUtj 4juua)t |Uu>^ u: * :body Jt^* u: * 

<html> 

<head> 

<meta charset="utf-8”> 

<title>Or»e IS/lillion Arab Coder</title> 

</head> 

<body> 


</body> 
</htm l> 


<meta charset="utf-8"> 


M3 


♦Title Jt |Quj JuS (J}> (jZi jt JuJ LutJ Jjujj j Jj JjjjjJi 4jkUt jujjj Jj J^aLu Ji uk U uu jjs> j£aJ$ 4-uLi/^ft j^Ludt j*« ju) 


JULu uu/LDt jLsajt J& (Wj Jjsa j^Ut j ju» UsaL$ 


jujjJuLm ^Luj utjl£a jJsaJ HTML Jt Jtj^at *4jL=aj LLLu JLu :4^U 4la>}b 

:JJlOJ fft^jj 4JLUt £j>u)t 



j>t Ujj 4lu JujLjj Jb (U^ajt JJ tj^) tJu> L^Jjaj^ 4uLwVt 4uuJt jt^sat 4jU£a^ ujj 4jsiu cLut ^i^jjG ^xut 4J jxuDt jt jjjuu 3i>j)t dLu Ja 


HTMLubuituJ& CSS i'^sa' ^tjiLut jjij 

« u " Lfei U ujftjj Jjij u^j ^jutf 


Mohammed Alhakem 


Esraa elshiekh 























r ^ 



<! doctype html> 

<html> 

<head> 

<title>One Million Arab Coders</title> 

</head> 

<body style= M background-color : black; M > 

<p style= M color :white; font-size:25px; M >One million Arab Coders</p> 
</body> 

</html> 



background-color3*ut>^tji^b JjJ juxjj body style^l>^U?ius4 -Uju uui (jttl 

<body style= M background-color : black; M > 

hhJI JjJ jryJuj p Style uAalj 

<p style= M color :white; font-size:25px; ">One million Arab Coders</p> 

CSS Lgufl^ JJiJ HTMLiuiiLLuU^a JlU 4j^f HTMLj^UaU CSS Jl Jtj^at $ Jub ^tJ&uwb V 

.Jt^a^U j«Jt uLUjUtj fcuLLUt j^ UUaLj u^bJuuJt J^u uouJt j^ j lUUI (*jk> Jujuu 4ujjIaJt j4^j 

j^Uo JuaLu HTM L Jllumj J>tJu CSS Jt Jt^at Juuj :4uLuJt 4ujjiaJt 

Style J>tJu CSS Jt Jt^at 4jU£a JjLua^b 4 jjLJt j^ ulajt 4ujjUt jlu 

<style>^l I L_L»</style> 

headjl a Js t tlu (Lu 

<! doctype html> 

<html> 

<head> 

<title>One Million Arab Coders</title> 

<style> 
body { 

background-color: black; 

} 

.paragraph{ 
color: white; 
font-size :25px; 

} 

</style> 

</head> 

<body> 

<p class= M paragraph M >One million Arab Coders</p> 

</body> 

</html> 


: JjLJt (LJjyuJt Js Lj=a 4JsLuit 



4. u a L> j^i juajj body (9uvj bfltj ^ t (su J^aJt tlu Jfl 

body { 

background-color :black; /*^>j!U Ljl_LLUI j>J j-julAJ*/ 

} 


Mohammed Alhakem 
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^LJLsa ulAuiiJI 3SLuV dLUa^Ulj pa ragra ph >J 4jLuib LU2 P(**/j joj^aiJI j*iuj 

.paragraph{ 

coloriwhite; /*oi-H^-J ^uL-H 6>J j-i-la-3*/ 
font-size : 25px; /*la*_JI pj>> >jul-r_j*/ 

} 


J^aJI (Us> jLsa Jl> J&3rtl^-n L^J JyJu j^aJu^bJuLJI Jnt£ UJu J^*u Uj Si>lj 3iih< * J& Jlj^aVI 4jU£aJ p>u Jjl I 4 LS JUI Ju ^SjjbJt juu U 

_^ 

JudiU CSS uiu HTM L JllLu Ujj :4uJUI 4jjjiaJI 

ju uLLuUUl uiu HTM L Jl uU Ljjj p>u (U CSS Jt J'y=aL> t> ^jUUIj HTM L Jl J'=saL> jai> JjVI JduiU juU aLub p>u 'JQjjlaJi di& ^ 


:^JLJI HTM L Jj£a ptJ&uib dJljLUI JjjL 

<link rel= M stylesheet M type= M text/css M href= M style .css” /> 

^UJLsa head Jt 4iihU Ja j^aJI I4A juj (Luj style.css ^JJIj CSS Jb j^libl UUI (uJj juJju 4^j (U Ja> 

<! doctype html> 

<html> 

<head> 

<title>One Million Arab Coders</title> 

<link rel= M stylesheet M type= M text/css" href= M style .css" /> 

</head> 

<body> 

<p>One million Arab Coders</p> 

</body> 

</html> 

UUI fjj JUJusj (U Jl3 4jj£a Style (Uwjj Lfllaj^bJ ^LbsJ V djil dii j^aij 4uUI 4ijjLJI J3 LUu Ujsa j^Luibl JuJJsu Style.CSS uU Ji-IJu jVI 

:CSS uliuu uU 4jb 

body { 

background-color: black; 

} 

P{ 

color :white; 

font-size :25px; 

} _ 

jqu JmHIj 4js iu j^ ja£ab t^lajj bJuLu HTM L Jl 4jtiu ju uU.uiuJI UU ji Ju> HTM L Jl^sat 4jLLsaJ 4bjjJj JUaSi juaj dLu 


dJ^j uliUI JbuS jl <JI 4jLU^b HTM L uU ju jUsal ^ic ^ii uhlj i>lj uiu uIau u JI JuJjuJI Jju bJJJ^aj L£j 4lsyjjJI ubsiu)! <jic uLLubLJt 

.j2$ll uliU (UUbUJj J^saVI (ulau JuLu 4ijjiaJI 
♦ CSSJI Jl^al 4 jLUaJ uLubLb^l (Ufcl j^ ftt ^->7 < w jjjJJI IJjfc ^ 



^LJLsa l^iujJ “j HTML JtjuLbJ CSS juiu JuJ ^■u/LxVI ub^ajt Ja*u^ JU*^ S5 AaI Jj>a)l J& J>=aJl 


: Jj^LJl ju^udl 4iabiU 1 ‘ ‘ ^ a j U jl Selector JL^ 
:LUj JuJ Jjb u^j jjjj jusaJ lLw^ 4uU 4j$ijJIutAuuJI juh7ipjJiyijJJIUJ^TuJI>uuJt^ j*« 4 SjjL CSS Jl ^LbsJ ISjU/^ ubjSJb LUS Lusa 


p { 

color: red; 

} 


1 1 


Mohammed Alhakem 


Esraa elshiekh a 































Element Selector :<jj/VI2Jijjk)l 


♦<p> (ft*vjJI y*\+C. JJA> Ll J^LU LUi 4LULJI Ujs 4jU (**vjJt ^lJ&UU y* * £ (JlJtfrUU pyoj 4jJjidJI diu Js 

: JUj j>L(J 



: ^QUa 4 js.luJI 

^LujmiI tfi Jji p (W$JI >jLU 4U*U| (9J 4jI «a>^f _ 
ji-l uUL^I Jl j^jj (W^JI (wl 4 jL£aj ^ CSS Jl^ Element Selector JJUUjjju jlU&>V- 
ID Selector : 4JLi)l4jjjiaJI 

Jl ^l j^ 4>lj jufly j HTML Jl JlLumj 4^j JjjJ 4>lj >aU jtJ^L«t Ji>I jj> 4jjjjlu LUI LJafr^f U£aj ID Jl djJsj^ jJj LUJ 


.Ui-ixuwi Ujj^aljSelectors 
: JLU j>LJ 



:^LJUa^wUI 

♦dl>w jj J UjJ jjjJI i d Jl Jjju JJJI jiAjJI JlJ^UI (QJ 4jl ia>^f _ 
♦paragraph#S5UI LULU Js U=a id Jt (M uLUaj (U # ajU=j ^uj CSS Jl ^ id Selector JJ JjjjjU jlU. 
Class Selector :4JljJI 4jjjUl 

Jt (*At j^ 4>Ij jLju j HTML Jl JlLUu ^ j^LuJt j* jl jjj JlJ^UI J>i 4jjjjbU^jj LUt u)a>^f Ujsj J& Class JtSj^aJ^ jJj LUj 

.UU&Ut Ujj£atjSelectors 
: JUj J>LJ 

<!--HTML CODE--> 

<p class="paragraph">Hello world!</p> 

<p class="paragraph">One Million Arab Coder</p> 

<p>I don’t have a class</p> 


/*CSS CODE*/ 

.paragraph{ 
color: red; 

} _ 

. jjLJI JIjU juh7i (^J 

: jJLJUaajsJLJI 

paragraph jj^aJI (M jUj jUaUj jj>UU JIj^UI (Lj 4jI . 

paragraph.d^UI LJLL^U^aclass JlM ^LUaj <uL 4 jU=>j CSS JU CIass Selector JJ Jjjju jLUJag^f. 

:^UJI jl Porperty JI.T 

UuLidl £jj JjJjUj ^jj ji u» JJjj ^LuaJJj t 4j uUuuJJI 4jLJU IJuj jl U SiUI jjiaJI J>i ^ti£UU JJl ^T uJI >UjJI JjJjuj ^jj ji Jju 4JUI S^aiUt 

l^jjJaj JljJI 


1 Y 


Esraa elshiekh ^ 


Mohammed Alhakem 





















































m* e«** 

L.’»m-* 1 Ii»Oh (»id i!t—dw U.*l|* 



p 

> 

color: red; 




j$J juaj ja 3Jjj*JI ^uuli&JI (j& |color| SiUI ij^Jt Ja 4uuLi&JI 
^jjjbj L^jJuLj 3jjjw$ L^jJjQ L^j jjLifiJt j^j^JJ £$>jJt iLUa^L UJbj L^Jai^u ^mjUJIj JjJ! jj UjIj ULuj tjjuj jujLuifiJt dJJfe Jjjju fjL jU ujI 

L^IJjs u jI 

CSS26 Jt j aZ l a > £>jl uUJdJ LU hajai 
https://www.w3schools.com/cssref/default.asp 

:COlor jJUJUb 4uuli&JI 4jU£a 4ijjb Ja>^f _ 


: ^u^LicJI 4-ui jt Property Value JLY 


.Tuuli&Jt di£ 4jo3 JuJjfiU ^jj jt UJujj ujJdLl 4ujLi&Jtj Jj ^ uJLt j^auJI JjJjbu ^Jj jl Jju 4JUJI d^bj&Jt 


p c 

color: red; 

> 

9 Property value - d^UJI i 


red j-*>Vl jjJJI jJI 4jJ juaj uLUj uuJ uj> Ui&Jt jj juaj ^uli 3>u2 ju$j i^Ut ij>uJI 
♦L2>^f LgJ jjh7i «ij 13yjJI tJu J^Lfr j* L^jju iLUa^L u^iQ! j^JJI JjJjbU jjJj iJu JJLU . 

https://www.w3schools.com/cssref/pr text color.asp 

:4u^4UUj>^L 


flla>^fl uUfiUj jAJj <jic jLuu djrt>^t 4^uLi&Jt ujUa jlj Jj> * ^ Jj j a U I 4iuUJL L ^ U o S 4jU£a Joj iuli> J^a j^Ut • 



:<^JQt jaj >I uLJjjj uJj^ iJjj^a JjuaJ class Jl j id Jl gLuV uUuu J»uU jJJjfaa juLu JJLU 
JJtffiJI juuUL Jjiniilt jiu U JI U jjl Ujju CSS Jj£aJ LL7a>lj^ JjJau uj> ^jiihi a jLuwt jLu>L 

sdfgd j^aJj clients ^jwLL (fiJ^^LufiJL j^L> J* duJl Ijl: JUil JauJt^ic 

<div id="clients"X/div> 

. ^j^Uj L^iuu (UiuJt (UwV lUuj j* jjsat 4jU£a uJjt tjt _Y 
ti=aJw JjUiL 4ju?$j ^23 V clients feedback J ^u Jou Jjjj JUit Juu^U 

<div id="clients feedback"X/div> 

J>tj jmJj uU^Ua jLul 4JuLut iLt Jju J^saJI I L^j 
: J>lj jj ^Ua ^Uj&J ^JQt JqjiJ (fij 

<div id="clients-feedback"X/div> 

jjLuj jj>L id Jljclass Jl jUmI 4jU£aj Q _Y 
^QL^jVJIjLIJju/^ 

<div id="Clients"X/div> 

:^JQL(*2 Jj 

<div id="clients"X/div> 

Ubt^sat jtjjajj ^jj$ djJJ ti£ Jj&b&u j« jj£at 42 uLjj jJ>!j dj^ J^aJt 4 jU^s ^jj iLt LgjljuM Ja>I j* CSS Jt jt juajj ^Q&JI J& 

:^JQL (&jj 5U jUQfij ju^Ua jU juiQI juL juhl uJji iLi jjjuQ 




Esraa elshiekh a 


Mohammed Alhakem 



















































U= j ja ulU j*bl^JI jjjlxi jx margin ji Lwb j£ajj • 


¥ 



t 


^ margin-top 
^ margin-right 
^ margin-bottom 
• margin-left 

f)j>t 1 jJ) tjjuj ^UuLiJ) dJift j) Sj$*aJt 

4^U) jrf • 

Jtfcg)) Jv 9 JttjLfe • 

JUw^ft jv^ j*ULfe • 

jLmuJ) j*$ jU*U • 

: Ji-Uj 

<div class= M margin-test M X/div> 

.margin-test{ 
width: 980px; 
height: lOOpx; 
background-color: #0c214e; 
margin-top: 60px; 
margin-left: 80px; 

} 


: 



♦ "V ♦ ^UrV) J*9J A * imi jLfabJt Jv4 JMjLA JJ (rlt) ^LUfrU JAUw 

jiALC (j) ia^^J 4.y^Lidl aJA j^ Uu L uJ t 

: JlSt))J a j>LJ a uto j^lS L^lkt) JjL=^L) j L$J JjlJu Jl> Jfi ♦ ^tj^V) L^luu j^aj ma rgin X*a\> 


margin-test{ 
margin-top: 60px; 
margin-left: auto; 

: jJLJb i^Ut J^aJ) feAgjJ JALJmJ UjLLfc 

J^sa^u V j)Jjjj ^Jk) ju jlUU >aLJ) ^lk^t 
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margin-bottom: 0; 

4j^uj a uto J jJj j^VI IJla ^ .uja T J 4j$JjVI ^lk^b IjI ♦ ^uuaj ( margin-right ) juJI ju j*JU>uJJI jLhub ^iuiUJ bJi> Lui Uj 

^JLJLss 4lj^fab 

O r.'TTTj «r«<We*-0^i^.^- ■ _ Q ?< 

< o Ea t* 


t 



$ 5 auto <jAj 4jbUJI juiujLoJlj juJI {y* jlfcUUjiU J JI i Uasb LUJ U bl J.uj^u* jjJt U jua 

margin-test{ 
margin-top: 60px; 
margin-left: auto; 
margin-right: auto; 


: JbuUI -ULj 



♦ ^ jsauJI )am$ Jp jiAuJI Jji> Uj ^ylLJJ J^a Lu jLLtj juJI j^ j*U|#ll uLJ>b ^ iu T dt 

$ yJ Jbj^ Jjj^jil Ju 
JUJLJIj>^JI J-sLj c Ju* 1I JuL^a J*uu JJb JjLu^b 



!r 

auto 

»Uljt>l jj£a' ^Jjjiaj J^uaJI 4jU£aJ ^bSU ^JuLuJ jjuaiJI uu^£ jVI Ubb jijhj 
$4>lj jI&m ^ margin Juub UuUbaJ ^Lbh JUI jl$haVI Jib J^a ^wJu ^b V bU 
margin ^ama ujsj gjjjaJI ^jU ^uubdt ^l ^ojju jt^ JJjj 
jjjUj JUm/VI jl ^icVI jl«Uil j^ib JUI 4uui jl JuJuLb ^LLuw uu=a Ujjij ^JLJI j^uJI ^jic jhaj 



t 



lOOpx 


margln: 1 OOpx auto lOOpx auto; 

:^LaL^^IJj=4jU£sji^U>V 

margin:100px auto lOOpx auto; 

lihaA 4*LJI UjLU jbsjl uuu> uUbbVI <jift L^uuJbj LguL jjjib ^iuTdl ^JLuij L^UaJ jIj^sj fuubl JJsa jujj LUu 

auto 100 auto V^=jLuujsj juu^i 
$ bJlj£al jlj^au ^Ju ^ifc jujJsj jl um Lhb LLUj Ju* Lbl jhaJu Jjfc 
jiuuiJI juu UuLLU&l jLu$ jyu LLLu Jwuhau > ♦♦ 4,uhJI juu ULLdaut JjuiIj ^UI Mju jjLULII uUbsj^U fuubt jtj^au LUu Lbl Ja>^b JJ& 

.jUaj ju U^uJu ^uLL dJuuj dbuVI JLi^j uUbbVI dlb ju Jajjj DLU bl 



margln: 1 OOpx auto; 


^UlUaJ^aJI LbJj^uJ 

margin:10 Opx auto; 

^ 0 Mohammed Alhakem Esraa elshiekh 











































»J>\$ 'Aaj-2 J jIumIIj j|uJI j*UU jwJj LU2 Sjll »JA jUJ 5 _>=a!I jmau 'jJuji? Uftj 

margln: lOOpx auto SOpx; 


margin:10 Opx auto 5 Opx; 



$ *U.uJ' jMdJ uLbuVI j;U> cllau' uijl IjL 



margln: 1 OOpx; 

• < A»l 1 I </<i» < y/iA , l^U A A i A # 4 m 1 ^ < A 

/VVwM VMMlvMWvV Wr »M *WMI /WMMMf MMr 

margin: 1 0 Opx; 

JJujJ ^ jJjLoJI dJ^J ^Ufcl 

JmBmmU TO jLuJI jjj Jfcfcfc^au O 4 Jum/I j»ij J j^u-d! j^j J J. T 4 ^LI j*a JLL jiri 1 ntl ^uud_t 


margin:20px 30px 50px 25px; 


Jut^abU VjLmJI Jufct£au ♦ Jam/^I Jufc^auT♦ jjfcudl J**^au 4 w ^‘ v 


margin:Opx 20px Opx lOpx; 


4 ^ uubl Juu px 4uU£a ^Jic tMtl^rb 


margin:0 20px 0 lOpx; 


JLt^au T 4 Jjui^fl J~u=au T 4 jLmJIj JwmJI JbtM^abU 4 <jJul J* j^LuJI yLjul _T 


margin:Opx 20px 30px; 



uLbuyi Jfcfcfc^BbJ t 4 j^U>iAudl u h i iit.i 

margin:lOpx; 

autojLfcbJI JJ)J J^au 4 Jam/^I j^j auto jUbJI Jut^au 4 ^jbl J*jluudt^iuu mi^JJI J$^aJt%jlI£aU(*3 


Table JjlJi*)l 

i^JUlsa ^uw iuu J^aj ^uw Jji> Jl jb Uu> b jju 

Cell - d_J_^ i|Tume 1 1 Sunday| |Monday | | row - 

1 12:00 pm||class 1 ||class2 | 

1 14:00 pm||class 3 ||class4 | 

table - 

:^)QI LujJj il> HTML J! J3 J^IJ>^Lul1 ^buudj^a^)! dJt£ juu 
<ta ble> (^M)j ^IjJLmIj JjJuadl ujjaj 4j!ju _t 
<tr> (Qfcfcfc^)! ^UJbLfcb uluJ! uujju _T 
<td> (Ufc^JI ^ljJLufcb fciuJ! b^> ujjju _T 
:kuJ JiJ^ J-UU (LLL 


T <table> 

" <td>C©il l</td> 

! * <td>Cell 2</td> 

<P. </tr> 

u </table> 



: L JUJLsa table (^fcfcU JeJublfcbjjJLU LuU 

<table> 



<!--Jj4j*_JI JLjj_s_j--> 
</table> 



: ^JUJLss tr (Ufc^J JjVI fcAull JfcUU uiuJ (U 

<table> 



Mohammed Alhakem Esraa elshiekh a 


Mohammed Alhakem 







































































r 




<tr> 

< ! - UUC di-iJ-R _)-> 

</ tr> ** 

</table> 



^JLJLsa td JjJUfc)! J^lJJ 4^l> J^aa Jjju ujJ (U 



<table border="l"> 

<tr> 

<td>Cell l</td> <!--a^JI 4_<JJUI--> 

<td>Cell 2</td> <!--ii,aJI 4_<_)lJ_!l "ijJJUI--> 

</ tr> 

</table> 

Ji $£ U= jjid> J»jj LAall IJlA J>lJbj Jl>lj uba Ju. Jjjoj Sjtfii J^sJI Ji <U LU2 L« Ijl 

:^LUI JjJufc)! Jbju 

••• ubli ug * W»l* X 

I f C I : I 


Time ||Sunday 

Monday 

12:00 pmfdass 1 

dass 2 

14:00 pmfdass 3 

class 4 


:^QL£a 4 j^j bijjju (*j yj^lu ji ^Uaj 



:4ju1UI 


w 


Esraa elshiekh ^ 


Mohammed Alhakem 











































J^JtSsJI JbAJU jl JjjJ jVI Lui 


• • • cfciitsj 

f e ■ 


Time 

Suaday Monday 

12:00 pm 

class 1 llclass 2 

14;00 pm 

Lunchtime 


u^j LuJJ u>au)I 4uij J& Uou iojj juLd> u)U)l uLuJI J& LuJj jVI Lul Ja>^f 


Tnne 

Sunday 

Mcnday 

12:00 pin 

clasB 1 

class 2 

14:00 pm 

Lmicii tiine 


^QLsa h2$ jLul> <jlc j>>Ubu/ udLJt ^LuJI djil dJu j^aJj LuLw LuU Lusa J>Juas)l Juju (LLU 

<table border="l"> 

<tr> 

< td>T ime< / td> 

< td>Sunday< / td> 

< td>Monday< / td> 

</tr> 

<tr> 

<td>12:00 pm</td> 

<td>class l</td> 

<td>class 2</td> 

</tr> 

<tr> 

<td>14:00 pm</td> 

<td>Lunch time</td> 

</tr> 


</table> 



:4^S.bbJt 


Time ||Sunday 

Monday 

1 12:00 pm||clas$ 1 | 

|cla&& 2 | 

| i 4; 00 pm||Lwichunie| 



4^l> Js jLUl> guJu ^uj ji Jujj Lus Luu uJluJI uiull J& 4uJUJt 4ulisJt jLsa^ jJs> (U JU 4jLsa^ uu> 4j>Uait 4js,bbUt (U Lul h>^J Jjfe 

^LUl^a 


| Xiiia& 

11 Suuncla;^ 

11 ZN.-T or± cl a.y. r | 

j 12:00 

pm.||c:la.sEi. 1 

2. j 

j 14:00 

prri||LT 4 tci<zli. time 

II 1 
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: j>Luajjiaj b^bfiJt |uJ ftUaJLu JjtJuaUI ^ 

: Colspan Liii biteUIjw j 

i^LULaa L^Jj JUI b^ifiJI ujJbil JJoJI y ^d> juJ pjj uu> 


.UbJji JUI 4J6 .l 1UI Jbu^u lu=» L IjI c$jUij JjLJI LUlu» LUj 4jjjJu (LLi colspan attribute ^Jj&Tuu lj»LlU 

4JifiJt LUj JuLj Jjjj LDb' <^j LgJu LUj Julau uUjj JUI 4Ji&)l ^ -colspa n=" 2 ^lJ&ub jCLb gwJ uikj ^jj ji ^JI ^Lb&L* LUJu ^LuLU 

: ^JLUbb LULJI OuJI J 4uLJI 

<table border="l"> 

<tr> 

< t d>T ime< / 1 d> 

< td>Sunday< / td> 

< td>Monday< / td> 

</ tr> 

<tr> 

<td>12:00 pm</td> 

<td>class l</td> 

<td>class 2</td> 

</ tr> 

<tr> 

<td>14:00 pm</td> 

<td colspan="2">Lunch time</td> 

</ tr> 

</table> 

:4jeLuUI 


f 4 C 11 



.ujibil JuaLUI LLLu> 1 jilj 

: rowspa n b jjju b^i&JI jw j 

:^LUL£a Lgiiwl jjj JUI b^li&Jt j^ ujULil JJuUI y 4u±> gwJ (Lu uj> 


:^JLUI Jj-bUI J-uu ^iLU 

*** tilmg X « 

* 0 11: ★ ■ I 


Time 

Sunday 

MoncJay 

1 T-fifl +-avi 

da&& 1 

das& 2 

IZ.UU pm 

Limch time 


4J6 .L U I Jl^Lmjj pmli:-Ji-Ub JUI 4 -UU&JI^Jjbj (LLU 4 jIJuJI Js 

^ ^ Mohammed Alhakem Esraa elshiekh a 



















































































































<table border="l"> 

<tr> 

< td>T ime< / td> 

< td>Sunday< / td> 

< td>Monday< / td> 

</tr> 

<tr> 

<td>12:00 pm</td> 

<td>class l</td> 

<td>class 2</td> 

</tr> 

<tr> 

<td colspan= M 2 M >Lunch time</td> 

</tr> 

</table> 

:4julUt 

• • • * UfwTife x 

I <- c \Y~ " • • i | 


|Time |SundayMunday| 

112:00 pm|[das5 1 | 

[dass 2 ] 

Lunch time 



pm \ T : ♦♦ jUt Idx )! rowspan="2 (LLU j^! 


<table border="l"> 

<tr> 

< td>T ime< / td> 

< td>Sunday< / td> 

< td>Monday< / td> 

</tr> 

<tr> 

<td rowspan= M 2 M >12 :00 pm</td> 

<td>class l</td> 

<td>class 2</td> 

</tr> 

<tr> 

<td colspan= M 2 M >Lunch time</td> 

</tr> 

</table> 

:3juU! 

1 * 0 i -■ i I 


Time 

Simday||Monday 

12:00 pm 

cla$$ 1 ||cla$$2 

Ltmch lime 


.UjJialt Juab-J' LULu>) jj!j 


jJiult tiu <jJlz ^iAbVt t$>jt Jjt Jpbt <Lu plj jAukj j*j J J& 4^dt U J>t j^ j*ijJdt tJu juj (U :4ia>}L 

: HTM L Jt ^ JjtJjsait j^ Jj^it 

https://www.w3schools.com/html/html tables.asp 
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